<script setup>
import { reactive, ref } from "vue";
import loading from "@/components/loading/loading.vue";

let updateLog = reactive([]);
let showPage = ref(false);
const db = uniCloud.database();
db.collection("updateLog")
  .get()
  .then(({ result }) => {
    updateLog.push(...result.data[0].items);
    console.log(result.data[0].items);
    showPage.value = true;
  });
</script>

<template>
  <view class="updateLog">
    <loading v-if="!showPage"></loading>
    <u-navbar autoBack placeholder leftIconSize="38">
      <template #center>
        <text class="text-16 text-bold-700">更新日志</text>
      </template>
    </u-navbar>
    <view class="steps-box">
      <u-steps
        dot
        direction="column"
        activeColor="#109363"
        inactiveColor="#ddd"
      >
        <u-steps-item
          v-for="(item, index) in updateLog"
          :key="index"
          :title="item.text"
          :desc="item.version"
        ></u-steps-item>
      </u-steps>
    </view>
  </view>
</template>

<style scoped lang="scss">
.updateLog {
  padding: 32rpx 28rpx 56rpx;
  .steps-box {
    :deep(.u-text__value) {
      font-size: 30rpx !important;
      line-height: 1.6 !important;
    }
    :deep(.u-text__value--tips) {
      margin-top: 16rpx;
      font-size: 28rpx !important;
    }
    :deep(.u-steps-item--column) {
      padding-bottom: 18rpx !important;
      margin-bottom: 12rpx;
    }
    :deep(.u-steps-item__wrapper__dot) {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
